<template>
    <div>
        <div style="padding: 20px;">
            <div>
                x轴：<el-switch v-model="hasX"></el-switch>
                y轴：<el-switch v-model="hasY"></el-switch>
                x轴高：<el-input-number v-model="xHeight"></el-input-number>
                y轴宽：<el-input-number v-model="yWidth"></el-input-number>
                x轴反序：<el-switch v-model="xReverse"></el-switch>
                x轴模式: <el-select v-model="xOrder">
                            <el-option label="数字" value="number"></el-option>
                            <el-option label="大写字母" value="capitalLetter"></el-option>
                            <el-option label="小写字母" value="lowercaseLetter"></el-option>
                        </el-select>
                y轴反序：<el-switch v-model="yReverse"></el-switch>
                x轴模式: <el-select v-model="yOrder">
                            <el-option label="数字" value="number"></el-option>
                            <el-option label="大写字母" value="capitalLetter"></el-option>
                            <el-option label="小写字母" value="lowercaseLetter"></el-option>
                        </el-select>
                视图翻转：<el-switch v-model="viewReverse"></el-switch>
                视图x轴翻转：<el-switch v-model="viewXReverse"></el-switch>
                视图y轴翻转：<el-switch v-model="viewYReverse"></el-switch>
                列数：<el-input-number v-model="col" @change="getLayout"></el-input-number>
                行数：<el-input-number v-model="row" @change="getLayout"></el-input-number>
                宽高：<el-input-number v-model="rowHeight"></el-input-number>
                拖拽：<el-switch v-model="isDraggable"></el-switch>
                拖拽转换：<el-switch v-model="isDragendTransform"></el-switch>
                大小：<el-switch v-model="isResizable"></el-switch>
                选中模式: <el-select v-model="activeMode">
                            <el-option label="禁选" value="forbid"></el-option>
                            <el-option label="单选" value="single"></el-option>
                            <el-option label="多选" value="multiple"></el-option>
                        </el-select>
                打开复制：<el-switch v-model="openCopy"></el-switch>
                打开粘贴：<el-switch v-model="openPaste"></el-switch>
                宽：<el-input-number v-model="layoutWidth"></el-input-number>
                高：<el-input-number v-model="layoutHeight"></el-input-number>
                <el-button-group>
                    <el-button @click="handleLayout('toReverse')">反转</el-button>
                    <el-button @click="handleLayout('toXReverse')">x轴反转</el-button>
                    <el-button @click="handleLayout('toYReverse')">y轴反转</el-button>
                    <el-button @click="changeLayout">改变数据</el-button>
                    <el-button @click="copy">复制</el-button>
                    <el-button @click="copyCancel">取消复制</el-button>
                    <el-button @click="exchange">交换</el-button>
                    <el-button @click="paste">覆盖</el-button>
                </el-button-group>
                top: <el-input-number v-model="scrollTop" controls-position="right" @change="handleScrollTo" :min="0"></el-input-number>
                left: <el-input-number v-model="scrollLeft" controls-position="right" @change="handleScrollTo" :min="0"></el-input-number>
            </div>
            <VoGridLayout
                ref="layout"
                :layout.sync="layout"
                :layoutWidth="layoutWidth"
                :layoutHeight="layoutHeight"
                :activeLayout.sync="activeLayout"
                :col="col"
                :row="row"
                :isDraggable="isDraggable"
                :isResizable="isResizable"
                :hasX="hasX"
                :hasY="hasY"
                :xHeight="xHeight"
                :yWidth="yWidth"
                :xOrder="xOrder"
                :yOrder="yOrder"
                :viewReverse="viewReverse"
                :viewXReverse="viewXReverse"
                :viewYReverse="viewYReverse"
                :rowHeight="rowHeight"
                :xReverse="xReverse"
                :yReverse="yReverse"
                :activeMode="activeMode"
                :openCopy="openCopy"
                :openPaste="openPaste"
                :isDragendTransform="isDragendTransform"
                @on-change="handleChange"
                @on-active-change="handleActiveChange"
                @on-transformed="handleTransformed"
            >
                <template #default="{ item }">
                    <div>
                        {{item.i}}({{item.x}},{{item.y}})
                    </div>
                </template>
            </VoGridLayout>
        </div>
    </div>
</template>

<script>
import VoGridLayout from '@/components/GridLayout/index2.vue'
let index = 1

export default {
    components: {
        VoGridLayout
    },
    data() {
        return {
            layout: [],
            layoutWidth: 400,
            layoutHeight: 400,
            activeLayout: [],
            hasX: true,
            hasY: true,
            yWidth: 30,
            xHeight: 30,
            xOrder: 'capitalLetter',
            yOrder: 'number',
            xReverse: false,
            yReverse: false,
            viewReverse: false,
            viewXReverse: false,
            viewYReverse: false,
            isDraggable: false,
            isResizable: false,
            isDragendTransform: true,
            openCopy: true,
            openPaste: true,
            rowHeight: 60,
            col: 10,
            row: 10,
            activeMode: 'single',
            scrollTop: 0,
            scrollLeft: 0,
        }
    },
    mounted() {
        this.getLayout()
    },
    methods: {
        getLayout() {
            const list = []
            for (let i = 0; i < this.row; i++) {
                for (let n = 0; n < this.col; n++) {
                    list.push({
                        x: n,
                        y: i,
                        w: 1,
                        h: 1,
                        i: index++
                    })
                }
            }
            this.layout = list
        },
        handleLayout(key) {
            this.$refs.layout[key]()
        },
        changeLayout() {
            this.layout = this.layout.map(e => {
                return {
                    ...e,
                    disabled: Math.random() > 0.5
                }
            })
        },
        handleChange(item) {
            // console.log(item);
        },
        handleActiveChange(activeList) {
            // console.log(this.activeLayout);
        },
        copy() {
            this.$refs.layout.copy()
                .then(() => {})
                .catch((err) => {
                    this.$message.warning(err.message)
                })
        },
        copyCancel() {
            this.$refs.layout.copyCancel()
        },
        exchange() {
            this.$refs.layout.exchange()
                .then(() => {})
                .catch((err) => {
                    this.$message.error(err.message)
                })
        },
        paste() {
            this.$refs.layout.paste()
                .then(() => {})
                .catch((err) => {
                    this.$message.error(err.message)
                })
        },
        handleTransformed(i, newX, newY) {
            console.log(i, newX, newY);
        },
        handleScrollTo() {
            this.$refs.layout.scrollTo({
                top: this.scrollTop,
                left: this.scrollLeft,
                behavior: 'smooth'
            })
        }
    }
}
</script>

<style scoped>
</style>
